<template>
  <div class="navigation">
    <el-menu mode="horizontal" :default-active="activeIndex" text-color="#303133">
      <template v-for="(item, index) in menus">
        <el-menu-item
          :index="item.content"
          v-if="!item.children"
          :key="index"
          @click="goMenu(item)"
        >
          {{ item.title }}
        </el-menu-item>
        <el-submenu :index="item.content" v-else :key="index" placement="bottom">
          <template slot="title">
            <span @click="goMenu(item)">{{ item.title }}</span>
          </template>
          <el-menu-item
            :index="item.content"
            v-for="(child, index) in item.children"
            :key="index"
            @click="goMenu(child)"
          >
            {{ child.title }}
          </el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      courseTypeList: [],
      navList: []
    }
  },
  computed: {
    ...mapState({
      projectconfigData: state => state.projectSetting.projectconfigData
    }),
    ...mapGetters({
      menus: 'projectSetting/getMenus',
      globThemeColor: 'projectSetting/getGlobThemeColor'
    }),
    activeIndex() {
      return this.$route.name
    }
  },
  methods: {
    goMenu(item) {
      if (item.data_type == 1) {
        if (item.content == 'homepage') {
          if (item.blank == 1) {
            this.$router.push({
              name: item.content
            })
          } else {
            const { href } = this.$router.resolve({
              name: item.content
            })
            window.open(href, '_blank')
          }
        } else if (this.$util.inArray(item.content, ['video', 'live', 'offline', 'classes'])) {
          let content = {
            video: 1,
            live: 2,
            offline: 3,
            classes: 4
          }
          if (item.blank == 1) {
            this.$router.push({
              name: 'course',
              query: {
                type: content[item.content]
              }
            })
          } else {
            const { href } = this.$router.resolve({
              name: 'course',
              query: {
                type: content[item.content]
              }
            })
            window.open(href, '_blank')
          }
        } else {
          if (item.blank == 1) {
            this.$router.push({
              name: item.content
            })
          } else {
            const { href } = this.$router.resolve({
              name: item.content
            })
            window.open(href, '_blank')
          }
        }
      } else {
        if (item.content) {
          if (item.blank == 1) {
            window.location.href = item.content
          } else {
            window.open(item.content, '_blank')
          }
        }
      }
    }
  }
}
</script>
<style lang="scss">
.el-menu--popup {
  min-width: 110px !important;
  text-align: center;
  .el-menu-item:hover {
    background: #f7f7f7 !important;
  }
}
.el-menu--popup-bottom-start {
  margin-top: 0px !important;
}
</style>
<style lang="scss" scoped>
.navigation {
  flex: 1;
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  ::v-deep .el-menu {
    li + li {
      margin-left: 25px;
    }
    .el-menu-item {
      height: 70px;
      line-height: 70px;
      font-size: 15px;
      padding: 0;
      border: none;
      position: relative;
      &:hover {
        @include edu-color-primary();
      }
      &.is-active {
        border: none;
        &::after {
          content: '';
          width: 20px;
          height: 4px;
          border-radius: 2px;
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -10px;
          @include edu-color-primary(background-color);
        }
      }
    }
    .el-submenu {
      .el-submenu__title {
        height: 70px;
        line-height: 70px;
        font-size: 15px;
        padding: 0;
        border: none;
        position: relative;
        &:hover {
          @include edu-color-primary;
        }
      }
      &.is-active {
        .el-submenu__title {
          border: none;
          &::after {
            content: '';
            width: 20px;
            height: 4px;
            border-radius: 2px;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -10px;
            @include edu-color-primary(background-color);
          }
        }
      }
    }
  }
}
</style>
